<template>
  <el-row class="info">
    <!-- 左侧 -->
    <el-col :span="20">{{ data.name }}</el-col>
    <!-- 右侧 -->
    <el-col :span="4">
      <el-row type="flex">
        <el-col>{{ data.manager }}</el-col>
        <el-col>
          <el-dropdown>
            <span>操作<i class="el-icon-caret-bottom" /></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="showDialog">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!isCompany" @click.native="showEditDialog">编辑部门</el-dropdown-item>
              <el-dropdown-item v-if="!isCompany" @click.native="delet">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { delDepartments } from '@/api/departments'
export default {

  props: {
    data: {
      type: Object,
      required: true

    },
    isCompany: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    showDialog() {
      console.log('树型内的下拉框')
      this.$emit('showDialog', this.data)
    },
    showEditDialog() {
      this.$emit('showEditDialog', this.data)
    },
    // 删除功能的实现
    async delet() {
      await this.$confirm('是否确认删除')
      await delDepartments(this.data.id)
      this.$message.success('删除成功')
      this.$emit('colet')
    }
  }

}
</script>

<style scoped>
.info{
  width: 100%;
}
</style>
